<template>
	<view class="product-show">
		
		<skeleton-product-show-com v-if="isLoading"></skeleton-product-show-com>
		
		<product-header-com :bgShow="bgShow" :is_share="is_share" :invite_code="invite_code" :isFromHome="isFromHome"></product-header-com>
		
		<block v-if="product">
			<product-large-sku-cover-com></product-large-sku-cover-com>

			<product-slides-com :slides="product.slides" @getSliderHeight="getSliderHeight" ></product-slides-com>

			<view class="profile">
				<produc-profile-com :product="product" @shareProduct="shareProduct" :isCashBack="isCashBack" :source="source" ></produc-profile-com>
			</view>
			
			<view class="slogan">
				<view class="slogan-left">热-CLUB 精品酒城</view>
				<view class="slogan-right">一件包邮 真热情·不售假·品质保障</view>
			</view>
			
			<view class="arguments">
				<product-argument-com :product="product"></product-argument-com>
			</view>
			<!--推荐-->
			<!-- <view class="rec" v-if="product.recommendation.length > 0">
				<product-recommendations-com v-if="product && product.recommendation[0]"
					:recommendations="product.recommendation"></product-recommendations-com>
			</view> -->

			<view class="comments" v-if="commentsNum>0">
				<product-comments-list-com  :product="product" :list="list" :commentsNum="commentsNum"></product-comments-list-com>
			</view>

			<product-images-com :images="product.images"></product-images-com>

			<product-buy-panel-com :productId="pid" :is_gold_bean="product.is_gold_bean" :source="source" @shareProduct="shareProduct" :isTake="isTake"></product-buy-panel-com>
			 
			<!-- 支付bar上面悬浮的引导开通vip悬浮 -->
			<!-- <view class="buy-vip" @click="buyVip" v-if="user&&user.grade === 'normal'" >
				<image src="/static/images/common/buyvipbg.png" class="buyvipbg" mode=""></image>
				<view class="desc">
					<view class="text"><text class="openvipnum">9.9</text>开通VIP，本单立省</view>
					<view class="price"><text class="openvipnum">{{ (product.price_market - product.price_lowest + Number(product.brokerage)) | brokerageNum }}元</text></view>
				</view>
				<view class="money">
					<view class="price">立即开通</view>
					<image class="arrow" mode="aspectFit" src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/icons/arrow-right-bold.png"></image>
				</view>
			</view> -->

			<view class="sharePopup">
				<uni-popup ref="sharepopup" type="bottom">
					<view class="popup">
						<view class="share">
							<view @click="copyLink()">
								<image src="/static/images/copylink.png" mode=""></image>
								<view>复制链接</view>
							</view>
							<view @click="loadInvitePoster()">
								<image src="/static/images/saveimg.png" mode=""></image>
								<view>生成海报</view>
							</view>
						</view>
						<view class="cancel" @click="cancelShare">取消</view>
					</view>
				</uni-popup>
				<uni-popup ref="shareposterpopup" type="center">
					<view class="share-poster">
						<img class="image" v-if="invitePoster" :src="invitePoster" />
						<view class="save" @click="saveInvitePoster">长按图片并保存</view>
					</view>
				</uni-popup>
			</view>
		</block>
		<!-- <down-load-app-com :top="top"></down-load-app-com> -->
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import { mapGetters,mapActions,mapMutations } from 'vuex'
	import Skeleton from "mixins/Skeleton"
	// import CurrentUser from "mixins/CurrentUser"
	import { getInviteString } from "api/userApi"
	import { getProductInvitePoster } from "api/productApi"
	import { getComments } from "api/commentApi"
	import ProductHeaderCom from "components/common/ProductHeaderCom"
	import ProductSlidesCom from "components/product/detail/ProductSlidesCom"
	import ProducProfileCom from "components/product/detail/ProducProfileCom"
	import ProductRecommendationsCom from "components/product/detail/ProductRecommendationsCom"
	import ProductCommentsListCom from "components/product/detail/ProductCommentsListCom"
	import ProductImagesCom from "components/product/detail/ProductImagesCom"
	import ProductBuyPanelCom from "components/product/purchase/ProductBuyPanelCom"
	import ProductLargeSkuCoverCom from "components/product/purchase/ProductLargeSkuCoverCom"
	import ProductArgumentCom from "components/product/purchase/ProductArgumentCom"
	import SkeletonProductShowCom from "skeletons/SkeletonProductShowCom"
	import Pagination from "mixins/Pagination"
	import Base64 from 'base-64';
	
	
	
	// var code = 'eyJpbnZpdGVyX2lkIjpudWxsLCJpbnZpdGVyX2NvZGUiOm51bGwsImlzX3NoYXJlIjp0cnVlLCJwcm9kdWN0X2lkIjpudWxsfQ%3D%3D';
	// // var en = Base64.encode(code); //编码：MTIzNDU2
	// var de = Base64.decode(code); 
	// console.log(de)

	export default {
		name: "show",
		store,
		mixins: [
			Skeleton,
			// CurrentUser,
			Pagination
		],
		components: {
			SkeletonProductShowCom,
			ProductHeaderCom,
			ProductLargeSkuCoverCom,
			ProductCommentsListCom,
			ProductRecommendationsCom,
			ProducProfileCom,
			ProductImagesCom,
			ProductSlidesCom,
			ProductBuyPanelCom,
			ProductArgumentCom
		},
		data(){
			return{
				inviteString: null,
				invitePoster: null,
				comments:null,
				invite_code: null,
				pid:'',
				bgShow:false,
				is_share:'false',
				top:'200',
				isCashBack:false,
				isFromHome:false,
				isTake:false,
				source:'wap',
				list:[],
				commentsNum:0,
				
			}
		},
		computed: {
			...mapGetters([
				'product',
				'user',
				'statusBar',
				'isLogin'
			])
		},
		async onShow() {
			await this.refreshSelectedSkuCount(1)
			/* if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
			if(await this.statusBar>0){
				this.source = 'app'
			} */
		},
		methods: {
			...mapActions(['getCurrentProduct','refreshSelectedSkuCount','getUserCartsCount']),
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			show(){
				if(this.isFromHome){
					uni.switchTab({
						 url:'/pages/index/index'
					})
				}else{
					uni.setStorage({ 
						 key:"newsTop",
						 data:0
					})
					
					uni.navigateBack({});
				}
			},
			async shareProduct() {
				if(this.source == 'wap'){
					this.$refs.sharepopup.open('bottom')
				}else{
					share.postMessage(this.product.title + ',' + this.product.id);
					// window.flutter_inappwebview.callHandler('shareGold',this.product.title,this.product.id)
				}
			},
			cancelShare() {
				this.$refs.sharepopup.close()
			},
			buyVip() {
				uni.navigateTo({
					url: `/packs/pages/user/buyvip?from=product`
				})
			},
			async loadInvitePoster() {
				if (this.user) {
					const response = await getProductInvitePoster(this.product.id)
					this.invitePoster = response.product_invite_poster
					this.$refs.shareposterpopup.open('center')
				} else {
					uni.navigateTo({
						url: `/packs/pages/auth/auth?from=product`
					})
					this.cancelShare()
				}
			},
			saveInvitePoster() {
				let that = this
				uni.getImageInfo({
					src: this.invitePoster,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success(res) {
								uni.showToast({
									title: '海报已保存至相册',
									duration: 2000
								})
								that.$refs.shareposterpopup.close()
								that.$refs.sharepopup.close()
							},
							fail(err) {
								uni.showModal({
									title: '提示',
									content: '由于您拒绝保存权限，无法保存图片，下次请前往设置开启权限',
									showCancel: false
								})
							}
						})
					}
				})
			},
			async loadProductInviteString(productId) {
				if (this.user) {
					const response = await getInviteString(productId)
					this.inviteString = response.invite_string
				}
			},
			async registerByInviterString(inviteCode = null) {
				if (this.user) { return }
				if (inviteCode) {
					let invite_code = this.invite_code
					uni.navigateTo({
						url: `/packs/pages/auth/auth?invite_code=${invite_code}&product_id=${this.pid}`
					})
				}
			},
			loadComments(id) {
				// {page: 1, include: 'user'}
				let parms = {
					pid:id,
					index:0
				}
				getComments(parms).then(res=>{
					this.commentsNum = res.meta.total;
					this.list = res.data;
					
				})
			},
			getSliderHeight(height){
				this.sliderHeight = height;
			},
			share(){
				location.href = 'weixin://dl/business/?t=CwNtmFSBMzr'
			},
			copyLink(){
				let invite_code = null; 
				let query = {};
				if(this.user){
					invite_code = this.user.invite_code
				}
				if(invite_code){
					query = {
						product_id:this.pid,
						inviter_code:invite_code,
						is_share:true
					}
				}else{
					query = {
						product_id:this.pid,
						is_share:true
					}
				}
				let baseQuery = Base64.encode(JSON.stringify(query)) 
				
				
				let  title = this.product.title;
				let copyUrl = '【热-CLUB】' +  window.location.origin + '/#/packs/pages/product/show?query=' + baseQuery + '「' + title + '」点击链接直接打开';
				uni.setClipboardData({
				    data: copyUrl,
				    success: function () {
							uni.showModal({
								content:'已复制到剪切板!去分享给好友！',
								showCancel: false,
								confirmText:'去分享'
							})
				    }
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= this.sliderHeight) {
				this.bgShow = true
			} else {
				this.bgShow = false
			}
		},
		async onLoad(options) {
			
			if(options.isTake){
				this.isTake = options.isTake
			}
			if(options.query){
				let new_options = JSON.parse(Base64.decode(options.query))

				if(new_options.inviter_code){
					this.invite_code = new_options.inviter_code;
					uni.setStorage({
						key: 'invite_code',
						data: new_options.inviter_code
					})
				}
				if(new_options.product_id){
					this.pid = options.product_id
				}
				if(new_options.is_share){
					let strTmp =  new_options.is_share;
					this.is_share = strTmp.toString();
				}
				await this.getCurrentProduct(new_options.product_id)
				this.loadComments(new_options.product_id)
				// await this.loadProductInviteString(new_options.product_id)
			}else{
				if(options.from){
					if(options.from == 'true'){
						this.isFromHome = true
					}else{
						this.isFromHome = false
					}
					
				}
				if(options.isCashBack){
					this.isCashBack = options.isCashBack
				}
				if(options.invite_code){
					this.invite_code = options.invite_code
					uni.setStorage({
						key: 'invite_code',
						data: options.invite_code
					})
				}
				if(options.product_id){
					this.pid = options.product_id
				}
				if(options.is_share){
					this.is_share = options.is_share
				}
				await this.getCurrentProduct(options.product_id)
				if(await this.isLogin){
					this.getUserCartsCount();
				}
				this.loadComments(options.product_id)
				// await this.loadProductInviteString(options.product_id)
			}
			
			// if(options.invite_code){
			// 	await this.registerByInviterString(options.invite_code)
			// }
			
			// if (window.history && window.history.pushState) {
			// 	history.pushState(null, null, document.URL);
			// 	window.addEventListener("popstate", this.show, false);
			// }
			// await this.loadPageData()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		width: 100%;
		overflow-y: auto;
		position: fixed;
		left:0;
		top:0;
	}
	.product-show {
		min-height: 100vh;
		background: #F6F6F6;
		padding-bottom: 240rpx;
		.profile {
			padding: 0 20rpx;
		}
		.rec {
			padding: 0 20rpx;
		}
		
		.sharePopup {
			position: absolute;
			z-index: 99999999;
			.popup {
				background: white;
				width:750rpx;
				height:460rpx;
				position: fixed;
				left:0;
				bottom: 0;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				.share {
					display: flex;
					justify-content: space-around;
					padding:40rpx 40rpx 20rpx 40rpx;
					>view{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						>view{
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top: 18rpx;
						}
						>image{
							display:block;
							width: 128rpx;
							height: 128rpx;
						}
					}
				}
				.cancel {
					padding:20rpx 0 60rpx 0rpx;
					text-align: center;
					font-size:28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
			.share-poster {
				.image {
					width: 556rpx;
					height: 988rpx;
				}
				.save {
					width: 484rpx;
					height: 80rpx;
					margin: 0 auto;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(135deg, #FFDD62 0%, #FFBF0D 100%);
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}
			}
		}
	}
	
	.product-poster-box{
		width:450rpx;
		height:800rpx;
		background: #FFFFFF;
		position: fixed;
		bottom:500rpx;
		left:150rpx;
		border-radius: 16rpx;
	}
	
	
	
	
	
	.buyvipbg{
		display: block;
		width: 100%;
		height: 68rpx;
		position: absolute;
		left:0;
		top:0;
		z-index: -1;
	}
	.buy-vip {
		width: 750rpx;
		height: 68rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFE066;
		background: url(../../../static/images/buyviptips.png);
		background-size: cover;
		position: fixed;
		left: 0;
		bottom:158rpx;
	
		.desc {
			display: flex;
			font-size: 24rpx;
			align-items: center;
	
			.icon {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}
	
			.text {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AC7424;
				.openvipnum{
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FE0000;
					margin-left: 16rpx;
				}
			}
	
			.price {
				// height: 32rpx;
				// color: white;
				// background-color: #EF6767;
				// border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FE0000;
				padding: 0 5rpx;
				// margin: 0 10rpx;
			}
	
			.unit {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AC7424;
			}
		}
	
		.money {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			height:68rpx;
			color: #333333;
			.price {}
			.arrow {
				width: 24rpx;
				height: 24rpx;
				margin-right: 16rpx;
			}
		}
	}
	.slogan{
		width:100%;
		height:88rpx;
		background-color:#333;
		color:#fff;
		line-height:88rpx;
		.slogan-left{
			margin-left:16rpx;
			float:left;
			font-size:28rpx;
		}
		.slogan-right{
			margin-right:16rpx;
			font-size:24rpx;
			float:right;
		}
		
	}
</style>
